<template>
	<view style="background-color: #F7F7F7;" class="guarantee">
		<view class="home_top">
<!-- 			<view class="back" @click="backClick">
				<view></view>
			</view>
			<view class="title" style="font-size: 36rpx;">一键报修</view>
 -->
		</view>
		<view class="mainBox">
			<view class="main">
				<view class="title">维修信息填写：
					<text class="iconfont" style="font-size: 24rpx;margin-left: 40%;"
						@click="tipsClick(true)">&#xe618;&nbsp;&nbsp;报修须知</text>
				</view>

				<view class="inputBox">
					<view class="slide">
						<text><text class="xinhao">*</text>联系人：</text>
						<input type="text" v-model="form.user_name">
					</view>
					<view class="slide">
						<text><text class="xinhao">*</text>联系电话：</text>
						<input type="text" maxlength="11" v-model="form.user_mobile">

					</view>
					<view class="slide">
						<text><text style="visibility: hidden;" class="xinhao">*</text>备用电话：</text>
						<input type="text" maxlength="11" v-model="form.user_spare_mobile">
					</view>
					<view class="slide">
						<text><text class="xinhao">*</text>报修地址：</text>
						<input type="text" v-model="form.address">
						<view class='iconfont addrIcon' style="color: #029E8E;font-size:36rpx;" @click="addrClick">
							&#xe612;</view>
					</view>

					<view class="slide">
						<text style="width:160rpx;"><text class="xinhao"
								style="visibility: hidden;">*</text>选择时间：</text>
						<uni-datetime-picker returnType="timestamp" v-model="form.time" type="datetime"
							@change="timeChange" style="width:440upx" />
					</view>
					<view class="slide">
						<text><text style="visibility: hidden;" class="xinhao">*</text>选择师傅：</text>
						<input type="text" @click="chooseMaster" v-model="nickname" placeholder="--点击选择--"
							style="text-align: left;">
					</view>
					<view class="slide">
						<text><text style="visibility: hidden;" class="xinhao">*</text>问题描述：</text>
						<input type="text" v-model="form.mark">

					</view>
					<view class="slide" style="justify-content: flex-start;align-items: flex-start;">
						<text><text style="visibility: hidden;" class="xinhao">*</text>维修类型:</text>
					<view class="choose flex">
						<uniChcek v-model="activearr" min="0" :max="workerType.length" mode="tag" selectedColor="#029E8E"
							selectedTextColor="#ffffff" :localdata="workerType" :multiple="true">
						</uniChcek>
					</view>
					
					</view>
					
					<view class="slide mt20" style="justify-content: flex-start;align-items: flex-start;">
						<text><text style="visibility: hidden;" class="xinhao">*</text> 报修图片：</text>

						<htz-image-upload :max="3" :chooseNum="3" v-model="uploadimg" @uploadSuccess="uploadimgSuccess" style="width: 70%;"
							:compress="false" action="https://bst.schainbaas.com/api/upload/image"
							:sourceType="sourceType">
						</htz-image-upload>
					</view>
					<view class="slide " style="justify-content: flex-start;align-items: flex-start;">
						<text><text style="visibility: hidden;" class="xinhao">*</text>报修视频：</text>

						<htz-image-upload :max="1" :chooseNum="1" v-model="uploadvideo"
							@uploadSuccess="uploadvideoSuccess" mediaType="video" maxDuration="15"
							action="https://bst.schainbaas.com/api/upload/image" :sourceType="sourceType">
						</htz-image-upload>
					</view>
					<view class="slide">
						<text><text class="xinhao" style="visibility: hidden;">*</text>积分抵扣：</text>
						<radio-group @change="radioChange" style="margin-left: 5rpx;    width: 70%;">
							<label class="radio ml20">
								<radio value="0" checked />不抵扣
							</label>
							<label class="radio ml20">
								<radio value="1" />抵扣
							</label>
						</radio-group>

					</view>
					<text class="content" style="font-size: 26rpx;color: #999;padding-left: 30rpx;">
						剩余积分 <text style="color: #007AFF;">{{userinfo.integral}} </text> 还可抵扣<text
							style="color: #D52F33;">{{(userinfo.integral / discount).toFixed(2) }}</text> 上门费
					</text>
				</view>
			</view>
			<button @click='sumbit'>一键报修</button>
			<view class="tispBox">
				<view class="text1">报修须知：</view>
				<text v-for="(item,index) in tips" :key="index">{{item.serial_number}} {{item.content}}</text>
			</view>
		</view>
		<view class="coverBox" v-if="coverBox">
			<vuew class="content">
				<view class="title">报修须知</view>
				<text class="text1" v-for="(item,index) in tips" :key="index">{{item.serial_number}}
					{{item.content}}</text>
				<button @click="tipsClick(false)">我已知晓</button>
			</vuew>
		</view>
	</view>
</template>

<script>
	import timePicker from "@/components/uni-datetime-picker/uni-datetime-picker.vue"
	import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
	import uniChcek from '@/components/uni-ui/lib/uni-data-checkbox/uni-data-checkbox.vue'
	
	import {
		get_repair_notice,
		createOrder,
		userinfo,
		getWorkCate
	} from '../../../api/api.js'
	export default {
		components: {
			htzImageUpload,
			uniChcek
		},
		data() {
			return {
				addr: "",
				show: false,
				sourceType: ['album', 'camera'],
				uploadimg: [],
				uploadvideo: [],
				workerType:[],
				form: {
					user_name: "",
					user_mobile: "",
					user_spare_mobile: "",
					address: "",
					lng: "",
					lat: "",
					time: "",
					est_start_time: "",
				
					mark: "",
					is_integral_deduction: 0,
					est_start_time: "",
					worker_id: "",
				},
				activearr:[],
				userinfo: {},
				nickname: "",
				nowdate: "",
				quantity: 1,
				coverBox: false,
				tips: [],
				discount: "",
				lstyle: {
					"height": 60, // 边框高度
					"width": 60, // 边框宽度
					"border": { // 如果为 Boolean 值，可以控制边框显示与否
						"color": "#eee", // 边框颜色
						"width": "1px", // 边框宽度
						"style": "solid", // 边框样式
						"radius": "50%" // 边框圆角，支持百分比
					}
				},
			}
		},
		created() {
			this.getnoewdate()
			this.getWorkCate()
			this.discount = uni.getStorageSync('discount')
			console.log('时间', this.$moment(new Date()).format('YYYY-MM-DD hh:mm:ss'))
			this.datainit()
			this.userinfo = uni.getStorageSync('userInfo')
		},
		onLoad(opt) {
			if (JSON.stringify(opt) == "{}") return
			if (opt.form) {
				this.form = JSON.parse(decodeURIComponent(opt.form))
			}
			this.form.worker_id = opt.ids
			let person = JSON.parse(decodeURIComponent(opt.person))
			if (person.length == 0) return this.nickname = ''
			person.forEach(item => {
				this.nickname += item.nickname + ','
			})
			
		},
		methods: {
			// 获取维修类型
			getWorkCate(){
				getWorkCate().then(res=>{
				let tag =res.data.data
				console.log('标签',tag)
				tag.forEach(item => {
					item.text = item.cate_name
					item.value = item.id
				})
				this.workerType = tag
				})
			},
			// 更新信息
			updata() {
				userinfo().then(res => {
					this.userInfo = res.data
					console.log(this.userInfo, '0000')
					uni.setStorageSync('userInfo', this.userInfo)
				})
			},
			// 上传图片
			uploadimgSuccess(e) {
				let that = this
				let path = JSON.parse(e.data).data.url
				if (!that.uploadimg) {
					that.uploadimg = []
				}
				that.uploadimg.push(path)
				console.log('图片', that.uploadimg, path)

			},
			// 上传视频
			uploadvideoSuccess(e) {
				let that = this
				let path = JSON.parse(e.data).data.url
				if (!that.uploadvideo) {
					that.uploadvideo = []
				}
				that.uploadvideo.push(path)
				console.log('图片', that.uploadvideo, path)
			},
			// 获取截止时间
			getnoewdate() {
				this.nowdate = this.$moment(new Date()).format('YYYY-MM-DD hh:mm:ss')
			},
			// 页面初始化
			datainit() {
				get_repair_notice().then(res => {
					this.tips = res.data
				})
			},
			sumbit() {
				let data = {
					...this.form
				}
				if(this.uploadimg.length){
					data.images = this.uploadimg.toString()
				}
				if(this.uploadvideo.length){
					data.video = this.uploadvideo.toString()
				}
				if(this.activearr.length){
					data.cates =  this.activearr.toString()
				}
				data.est_start_time = data.est_start_time / 1000
				// data.est_end_time = data.est_end_time / 1000
				if (!data.user_mobile || !data.user_name || !data.address) return uni.showToast({
					title: "请完善信息!",
					icon: "none",
				})
				createOrder(data).then(res => {
					uni.showToast({
						title: res.data,
						icon: "none"
					})
					let data = res.data.result.jsConfig

					if (!data) {
						// 这里说明上门费全被积分抵扣了
						this.updata()
						uni.redirectTo({
							url: '/pages/package/success/index'
						})
						return;
					}
					console.log('支付需要的参数!', data)
					uni.requestPayment({
						appId: data.appId,
						timeStamp: data.timestamp,
						nonceStr: data.nonceStr,
						package: data.package,
						signType: data.signType,
						paySign: data.paySign,
						success: function(res) {
							// 支付成功的回调中 创建绘本馆成功
							uni.showToast({
								title: "支付成功！",
								icon: "none"
							})
							uni.redirectTo({
								url: '/pages/package/success/index'
							})
						},
						fail: function(err) {
							console.log('取消', err)
							uni.showToast({
								title: '支付取消',
								duration: 1500,
								icon: 'none'
							});

							// that.$api.msg('支付取消', 1000);
						}
					})
				})

			},
			// 单选框
			radioChange(e) {
				console.log(e)
				this.form.is_integral_deduction = e.detail.value
			},
			backClick() { // 返回上一级
				uni.navigateBack({
					delta: 1
				});
			},
			tipsClick(flag) { // 点击保修须知弹出提示框
				this.coverBox = flag;
			},
			addrClick() { // 地址选择事件
				const _this = this;
				uni.chooseLocation({
					success: (res) => {
						console.log(res, 1)
						let {
							address,
							name,
							latitude,
							longitude
						} = res;
						_this.form.lng = longitude
						_this.form.lat = latitude
						_this.form.address = address + name;
					},
					fail: (res) => {
						console.log(res, 2)
					}
				})
			},
			reduce() { // 师傅人数减少
				if (this.quantity == 1) {
					return;
				}
				this.quantity -= 1;
			},
			increase() { // 师傅人数增加
				this.quantity += 1;
			},
			timeChange(e) { // 事件选择事件
				this.form.est_start_time = e
				// this.form.est_end_time = e[1]
				// console.log('当前时间',e, this.form.est_start_time, this.form.est_end_time)
			},
			chooseMaster() {
				uni.navigateTo({
					url: `/pages/chooseMaster/chooseMaster?form=${encodeURIComponent(JSON.stringify(this.form))}`
				})
			},
		},


		components: {
			timePicker
		}
	}
</script>

<style scoped lang="less">
	.home_top {
		/* padding-left: -25px; */
		background-image: url('http://xiaowen.cool:86/yjky/yjkybg.png');
		background-size: 100% 100%;
		width: 750upx;
		height: 185upx;
		box-sizing: border-box;
		padding-top: 104upx;
		position: relative;
		text-align: center;

		>.title {
			font-size: 40upx;
			color: #fff;
			line-height: 1;
		}

		.back {
			width: 50upx;
			height: 50upx;
			position: absolute;
			left: 30upx;
			top: 104upx;

			view {
				width: 30upx;
				height: 30upx;
				border-left: 2px solid #fff;
				border-top: 2px solid #fff;
				transform: rotate(-45deg);
			}
		}

		.tips {
			display: flex;
			align-items: center;
			position: absolute;
			right: 30upx;
			top: 96upx;

			image {
				width: 48upx;
				height: 48upx;
			}

			text {
				color: #fff;
				font-size: 24upx;
				margin-left: 1upx;
			}
		}
	}

	.mainBox {
		padding: 0 30upx;
		box-sizing: border-box;
		margin-top: -150upx;

		.main {
			width: 100%;
			height: auto;
			background: #fff;
			border-radius: 10upx;
			padding: 30upx 36upx 50upx 20upx;
			// box-shadow: 0 0 10upx 15upx rgba(170, 206, 255, 0.5);
			position: relative;
			box-sizing: border-box;

			.title {
				font-size: 32upx;
				color: #029E8E;
			}

			.inputBox {
				.slide {
					width: 100%;
					height: auto;
					display: flex;
					align-items: center;
					line-height: 1;
					margin-top: 30upx;
					position: relative;

					text {
						font-size: 28upx;
						color: #333;
						width: 160upx;
					}

					input {
						width: 440upx;
						height: 60upx;

						outline-style: none;
						border: 1px solid #ccc;
						color: #666;
						border-radius: 3px;
						box-sizing: border-box;
						padding-left: 10upx;
						font-size: 28upx;

						&.addr {
							height: 100upx;
						}


					}


					.xinhao {
						font-size: 32upx;
						color: #FF2D2D;
						width: 20rpx;
						// margin-left: 18upx;
					}

					.addrIcon {
						position: absolute;
						right: -36upx;
						bottom: 0;
					}

					.choiceBox {
						width: 180upx;
						height: 60upx;
						border: 1px solid #999;
						display: flex;
						align-items: center;

						view {
							width: 60upx;
							height: 60upx;
							font-size: 30upx;
							color: #999;
							display: flex;
							align-items: center;
							justify-content: center;
							box-sizing: border-box;
						}

						.center {
							border-left: 1px solid #999;
							border-right: 1px solid #999;
							color: #5490FE;
							font-size: 28upx;
						}
					}
				}
			}
		}

		button {
			font-size: 32upx;
			color: #fff;
			width: 620upx;
			height: 80upx;
			border-radius: 40upx;
			box-shadow: 0upx 5upx 10upx #029E8E;
			margin: 80upx auto 50upx;
			background: #029E8E;
		}

		.tispBox {
			margin-bottom: 200rpx;
			padding-left: 46upx;

			.text1 {
				font-size: 28upx;
				color: #333;
			}

			text {
				font-size: 24upx;
				color: #999;
				margin-top: 10upx;
				display: flex;
			}
		}
	}

	.coverBox {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, .3);
		z-index: 102;

		.content {
			width: 590upx;
			height: auto;
			padding: 34upx 30upx 138upx;
			box-sizing: border-box;
			color: #333;
			background: #fff;
			border-radius: 20upx;

			.title {
				font-size: 28upx;
				text-align: center;
			}

			text {
				display: block;
				font-size: 24upx;

				&.text1 {
					margin-bottom: 32upx;
					margin-top: 54upx;
				}

				&.text2 {
					padding-bottom: 10upx;
					border-bottom: 1px solid #F7F5F6;
				}
			}


		}
	}
	.choose {
		width: 55%;
		// padding: 30rpx 50rpx;
	}
</style>
